<template>
  <div class="detail">
    <header @click="$router.back()">
      <van-icon name="arrow-left" />
    </header>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in detail.pics2" :key="index">
        <img :src="item" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="exp">
      <h5>{{ detail.basicInfo?.name }}</h5>
      <p>{{ detail.basicInfo?.characteristic }}</p>
      <section>
        <span class="lt">低价￥{{ detail.basicInfo?.minPrice }}</span>
        <span>原价￥{{ detail.basicInfo?.originalPrice }}</span>
        <span class="rt">库存{{ detail.basicInfo?.stores }}</span>
      </section>
    </div>
    <section class="tab">
      <span :class="{ active: tabIndex == 0 }" @click="tabIndex = 0">商品介绍</span>
      <span :class="{ active: tabIndex == 1 }" @click="tabIndex = 1">商品评价</span>
    </section>
    <div v-if="tabIndex == 0" v-html="detail.content"></div>
    <van-empty v-else description="描述文字" />
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-action-bar-icon icon="cart-o" text="购物车" :badge="badge" @click="$router.replace('/cart')"/>
      <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
      <van-action-bar-button type="warning" text="加入购物车" @click="showCheck" />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
    <van-action-sheet v-model:show="show" title=" ">
      <div class="pop-top">
         <img :src="detail.basicInfo.pic" alt="">
         <section>
           <h6>{{detail.basicInfo.name}}</h6>
           <p style="color:red">￥{{ price }}</p>
         </section>
      </div>
      <ul class="pop-center">
        <li v-for="(item,index) in detail.properties" :key="index">
          <h5>{{item.name}}</h5>
          <ol>
            <li v-for="(n,i) in item.childsCurGoods" :key="i" :class="{active:checkids[index]?.includes(n.id)}" @click="checkCur(item.id,index,n)">
              {{n.name}}
            </li>
          </ol>
        </li>
      </ul>
      <div class="pop-footer">
        <span>购买数量</span>
        <van-stepper v-model="buyNum" />
      </div>
      <van-button block type="danger" @click="addCart">加入购物车</van-button>
    </van-action-sheet>
  </div>
</template>
<script>
import { getDetail,getPrice } from "../../api/second/index.js";
import { useRoute, useRouter } from "vue-router";
import { reactive, toRefs, computed } from "vue";
import { useStore } from 'vuex';
import { Notify } from 'vant';
export default {
  setup() {
    const { params } = useRoute();
    const { push } = useRouter();
    const { commit,getters } = useStore();
    const data = reactive({
      detail: {}, // 详情的数据
      tabIndex: 0,
      show: false,
      buyNum: 1, // 购买数量
      price: 0, // 商品价格
      checkids: [],
      checkName: [],
    });
    const badge = computed(() => getters.cartNum);
    getDetail({ id: params.id }).then((res) => {
      data.detail = res.data;
      data.price = data.detail.basicInfo.minPrice; // 默认给定一个商品的价格
    });
    const showCheck = () => {
      // 规格的选择函数
      let token = localStorage.getItem("token");
      if (!token) {
        // 没有token 就没有登录过，自动跳转到登录页面
        push("/login");
        return;
      }
      data.show = true; // 展示规格面板
    };
    const checkCur = (bigId,index,val) => { // 规格的选择
      //  console.log(bigId,index);
      //  console.log(val);
      data.checkids[index] = `${bigId}:${val.id}`;
      data.checkName[index] = val.name; // 保存规格的名字
      getPrice({goodsId:params.id,propertyChildIds:data.checkids.join(',')}).then(res => {
        data.price = res.data.price;
      })
    }
    const addCart = () => { // 加入购物车
      let obj = {
        name: data.detail.basicInfo.name,
        url: data.detail.basicInfo.pic,
        price: data.price,
        buyNum: data.buyNum,
        checkid: data.checkids.join(','),
        checkName: data.checkName,
        ischeck: false,
        id: params.id // 商品的id
      }
      if (data.detail.properties.length == data.checkName.length){
          commit('savaList',obj);
          data.show = false; // 展示规格面板
          Notify({ type: 'success', message: '加入购物车成功' });
      } else {
        Notify({ type: 'warning', message: '请选择规格！' });
      }
    }
    return {
      ...toRefs(data),
      showCheck,
      checkCur,
      addCart,
      badge
    };
  },
};
</script>
<style lang="scss" scoped>
.detail {
  height: calc(100% - 50px);
  background: #e9e9e9;
  overflow: auto;
  .my-swipe {
    img {
      width: 100%;
      height: 375px;
    }
  }
  header {
    position: fixed;
    top: 10px;
    left: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    z-index: 99;
    padding: 2px;
    .van-badge__wrapper {
      background: #fff;
      border-radius: 50%;
    }
  }
  .exp {
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
    font-size: 12px;
    color: #b8b8b8;
    margin-top: -2px;
    h5 {
      font-size: 15px;
      margin: 10px 0;
      color: #000;
    }
    section {
      margin-top: 10px;
      .rt {
        float: right;
      }
      .lt {
        color: red;
        font-size: 14px;
        margin-right: 10px;
      }
    }
  }
  .tab {
    height: 45px;
    display: flex;
    background: #fff;
    margin-top: 10px;
    span {
      width: 50%;
      text-align: center;
      line-height: 45px;
      border-bottom: 2px solid transparent;
      font-size: 16px;
    }
    .active {
      border-color: red;
    }
  }
}
.pop-top{
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  img{
    height: 62px;
    width: 62px;
  }
  section{
    flex: 1;
    font-size: 14px;
    color: #000;
    margin-left: 10px;
    h6,p{
      margin-top: 15px;
    }
  }
}
.pop-center{
  padding: 10px;
  box-sizing: border-box;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  h5{
    font-size: 14px;
    line-height: 50px;
  }
  ol{
    display: flex;
    flex-wrap: wrap;
    li{
      font-size: 13px;
      border: 1px solid #ccc;
      border-radius: 3px;
      padding: 3px 6px;
      margin-bottom: 10px;
      margin-right: 10px;
    }
    .active{
      border-color: red;
    }
  }
}
.pop-footer{
  display: flex;
  height: 60px;
  padding: 0 10px;
  font-size: 14px;
  align-items: center;
  justify-content: space-between;
}
</style>
